<template>
  <el-dialog v-model="open" width="1000px" append-to-body>
    <el-form :model="form" label-width="80px">
      <div class="post-content">
        <el-input
            v-model="form.context"
            :rows="17"
            type="textarea"
            placeholder="发表你的内容..."
        />
        <div class="upload-section">
          <image-upload v-model="form.img" limit="1"/>
        </div>
      </div>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button type="primary" @click="submitForm">发 布</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </template>
  </el-dialog>
  <div class="forum-page">
    <el-button plain type="primary" @click="open=true">发布</el-button>
    <!-- 图片预览 -->
    <div v-if="imagePreview" class="image-preview">
      <img :src="imagePreview" alt="预览图片" />
    </div>

    <!-- 显示别人发表的内容 -->
    <div v-if="list.length" class="posts">
      <div v-for="(post, index) in list" :key="index" class="post">
        <div class="post-text"><h2>{{post.user.userName}}</h2>{{ post.context }}</div>
        <el-image style="width: 150px;height: 150px" :src="'http://localhost/dev-api'+post.img" />
        <div class="comments-section">
          <div v-for="(comment, idx) in post.list" :key="idx" class="comment">
            <span>{{comment.userName}}：{{ comment.text }}</span>
          </div>
          <el-input v-model="post.take" placeholder="请输入评论">
            <template #append>
              <el-button type="primary" plain @click="handleClick(post.id,post.take)">评 论</el-button>
            </template>
          </el-input>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';
const open = ref(false);
const text = ref('text')
const postText = ref('');
const imagePreview = ref('');
const newComment = ref('');
import useUserStore from '@/store/modules/user'
import {addForum, getAllList} from "@/api/system/forum.js";
import {addComment} from "@/api/system/comment.js";
const userStore = useUserStore()
const { proxy } = getCurrentInstance();
function submitForm(){
  form.value.userId = userStore.id
  console.log(form.value)
  addForum(form.value).then(response => {
    proxy.$modal.msgSuccess("新增成功");
    open.value = false;
  });
}
function handleClick(forumId,take){
  const commentForm =  {
    forumId:forumId,
    text:take,
    userId:userStore.id
  }
  addComment(commentForm).then(response => {
    proxy.$modal.msgSuccess("评论成功");
    getList();
  });
}

const form =ref({});
function reset() {
  form.value = {
    id: null,
    userId: null,
    createTime: null,
    context: null,
    img: null
  };
}
const list = ref([]);
const queryParams = ref({})
function getList(){
  getAllList().then(response => {
    list.value = response.rows;
  });
}
getList();
function cancel() {
  open.value = false;
  reset();
}
const posts = ref([]);


// 提交帖子
const submitPost = () => {
  if (!postText.value) {
    alert('请先输入内容');
    return;
  }

  const newPost = {
    text: postText.value,
    image: imagePreview.value,
    comments: [],
  };

  posts.value.push(newPost);
  postText.value = '';
  imagePreview.value = ''; // 清除图片预览
};

</script>

<style scoped lang="scss">
.forum-page {
  margin: 20px auto;
  font-family: Arial, sans-serif;
  background-color: #f9f9f9;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.post-content {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

textarea {
  width: 100%;
  height: 100px;
  padding: 10px;
  font-size: 14px;
  border: 1px solid #ddd;
  border-radius: 5px;
  resize: none;
  outline: none;
}

.upload-section {
  display: flex;
  gap: 10px;
  align-items: center;
}

input[type="file"] {
  padding: 5px;
  font-size: 14px;
}

.image-preview {
  margin-top: 20px;
}

.image-preview img {
  max-width: 100%;
  border-radius: 5px;
}

.posts {
  margin-top: 40px;
}

.post {
  padding: 15px;
  background-color: #fff;
  border-radius: 8px;
  margin-bottom: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.post-text {
  font-size: 16px;
  color: #333;
  margin-bottom: 10px;
}

.post-image {
  margin-top: 10px;
  max-width: 100%;
}

.comments-section {
  margin-top: 15px;
}

.comment {
  font-size: 14px;
  color: #555;
  margin: 5px 0;
}

input[type="text"] {
  width: 100%;
  padding: 8px;
  font-size: 14px;
  border: 1px solid #ddd;
  border-radius: 5px;
  outline: none;
}
</style>
